@import "./screen-mixin.scss";
@font-face {
  font-family: ShiShangZhongHeiJianTi;
  src: url("./../assets/font/ShiShangZhongHeiJianTi.ttf");
}

.screen-nav {
  &-container {
    position: fixed;
    bottom: size(2);
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 999;
    color: color(white);
    display: flex;
    justify-content: center;
    line-height: size(34);
    @include background-setting(
      "./../../../assets/images/nav-bg.png",
      60%,
      size(30)
    );
    background-position: center bottom;
  }

  &__left,
  &__right {
    image-rendering: -webkit-optimize-contrast;
    cursor: pointer;
    text-align: center;
    line-height: size(30);

    .nav-text {
      @include gradient-font(bottom, color(blue), color(white));
      font-family: "ShiShangZhongHeiJianTi";
      font-weight: 500;
      font-size: size(22);
    }

    &.is-active {
      .nav-text {
        @include gradient-font(bottom, color(white), color(white));
      }
    }

    &:hover {
      .nav-text {
        @include gradient-font(bottom, color(yellow), color(white));
      }
    }
  }

  &__left {
    @include background-setting(
      "./../../../assets/images/nav-button-left-bg.png",
      18%,
      size(33)
    );
    background-position: left top;
    padding-left: 1%;
    margin-top: size(-10);
    margin-right: size(3);

    &.is-active {
      @include background-setting(
        "./../../../assets/images/nav-button-left-active-bg.png",
        18%,
        size(33)
      );
    }
  }

  &__right {
    @include background-setting(
      "./../../../assets/images/nav-button-right-bg.png",
      18%,
      size(33)
    );
    background-position: right top;
    padding-right: 1%;
    margin-top: size(-10);
    margin-left: size(3);

    &.is-active {
      @include background-setting(
        "./../../../assets/images/nav-button-right-active-bg.png",
        18%,
        size(33)
      );
    }
  }
}
